<template>
	<div class="home">
		<top-bar title="流程申请" open="2">
			<div slot="rightItem"></div>
		</top-bar>
		<div class="block" v-for="item in sortList">
			<p class="title">{{item.workflow_type}}</p>
			<ul v-if="item.child.length!==0">
				<li v-for="item2 in item.child" :form_id="item2.form_id" @click="goDetails(item2)">
					<div class="img"><img :src="item2.icon"/></div>
					<p>{{item2.workflow_name}}</p>
				</li>
			</ul>
		</div>
		<div class="no-have" v-if="noHave">无申请权限，联系京东云客服咚咚：xnjccs3</div>
	</div>
</template>

<script>
	import topBar from '@components/topBar.vue'
	import {getForm} from '../request/api.js'
	export default{
		data(){
			return{
				value:'',
				dataList:[],
				noHave:false
			}
		},
		methods:{
			goDetails(item){
				this.$router.push({
					path:'/details',
					query:{
						'form_id':item.form_id,
						'title':item.workflow_name
					}
				})
			},
			changeList(list){
				let obj = {}
				list.forEach((item, index) => {
					let { workflow_type, workflow_type_order } = item;
					if (!obj[workflow_type]) {
						obj[workflow_type] = {
							workflow_type,	
							workflow_type_order,
							child: []
						}
					}
					obj[workflow_type].child.push(item);
				});
				this.dataList = Object.values(obj);
			}
		},
		components:{
			topBar
		},
		computed:{
			sortList(){
				return sortBykey(this.dataList, 'workflow_type_order')
			}
		},
		created() {	
			getForm({
				'_url':'detail',
				'erp':this.$store.state.third_name
			}).then(res=>{
				if(res.code === 0){
					if(res.data.length !== 0){
						this.changeList(res.data)
					}else{
						this.noHave = true
					}
				}
			})
		}
	}
	function sortBykey(ary, key) {
	  return ary.sort(function (a, b) {
	    let x = a[key]
	    let y = b[key]
	    return ((x < y) ? -1 : (x > y) ? 1 : 0)
	  })
}
</script>

<style lang="scss" scoped>
	.title{
		height: 40pt;
		line-height: 40pt;
		font-size: vw(16);
		color: $color1;
	}
	.block{
		width: 100%;
		padding:0 12pt;
	}
	.block ul{
		width: 100%;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		padding-bottom: 8px;
		border-bottom: 1px solid $line-1;
	}
	.block ul li{
		margin:0 vw(10);
		margin-bottom: 10px;
		text-align: center;
	}
	.block ul li img{
		width: vw(50);
		height: vw(50);
	}
	.block ul li p{
		font-size: vw(12);
		color: $color2;
		width: vw(65);
		text-align: center;
	}
	.no-have{
		font-size: vw(15);
		padding: vw(12) vw(16);
	}
</style>
